<template>
	<div class="middle_top_contetxt">
		数据更新时间 &nbsp; {{updateTime}}
		<el-row :gutter="10">
			<el-col :span="8">
				<div>
					<div class="context_div">累计确诊</div>
					<span class="context_span" style="color: #ff6a57;">{{confirmedNum}}</span>
				</div>
			</el-col>
			<el-col :span="8">
				<div>
					<div class="context_div">累计治愈</div>
					<span class="context_span" style="color: #10aeb5;">{{curedNum}}</span>
				</div>
			</el-col>
			<el-col :span="8">
				<div>
					<div class="context_div">累计死亡</div>
					<span class="context_span" style="color: #4d5054;">{{deadNum}}</span>
				</div>
			</el-col>
		</el-row>
		<el-row :gutter="10">
			<el-col :span="8">
				<div>
					<div class="context_div">疑似病例</div>
					<span class="context_span" style="color: #ec9217;">{{suspectedNum}}</span>
				</div>
			</el-col>
			<el-col :span="8">
				<div>
					<div class="context_div">新增疑似病例</div>
					<span class="context_span" style="color: #545499;">{{seriousNum}}</span>
				</div>
			</el-col>
			<el-col :span="8">
				<div>
					<div class="context_div">境外输入</div>
					<span class="context_span" style="color: #476da0;">{{externalConfirmedNum | checkData}}</span>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				confirmedNum: 0, //确诊数量
				curedNum: 0, //治愈数量
				deadNum: 0, //死亡数量
				updateTime: "",
				suspectedNum: 0,
				seriousNum: 0,
				externalConfirmedNum: 0,
			}
		},
		methods: {
			getmessage: function() {
				this.$axios({
					method: 'get',
					url: 'http://ncovdata.market.alicloudapi.com/ncov/cityDiseaseInfoWithTrend',
					headers: {
						'Authorization': 'APPCODE ' + '3967d3ad740543048d6b6f69110946ac'
					}
				}).then(response => {
					// console.log(response);
					let message = response.data.country
					this.confirmedNum = message.totalConfirmed
					this.curedNum = message.totalCured
					this.deadNum = message.totalDeath
					this.suspectedNum = message.totalDoubtful
					this.seriousNum = message.incDoubtful
					this.updateTime = message.time
				}).catch(error => {
					console.log(error);
				})
			}
		},
		mounted() {
			this.getmessage()
		},
		filters: {
			checkData: function(value) {
				if (value == 0) {
					return value = '暂无数据'
				}
			}
		}
	}
</script>

<style>
	.container .middle .middle_top .middle_top_context {
		background-color: #006600;
		display: inline;
		height: calc(100vh);
	}

	.context_span {
		font-size: 1.1875em;
		font-weight: 700;
		height: 1.1875em;
	}

	.context_div {
		margin: 10px;
		font-size: 1.0975em;
		height: 1.0975em;
	}
</style>
